From 8dfb0e728c5a939e5aacb16c3d596f110c7660dc Mon Sep 17 00:00:00 2001 From: Matthias Clasen Date: Tue, 3 Nov 2015 23:16:45 -0500 Subject: [PATCH] HighContrast: Update range styling Adapt to changes in the previous commit. --- gtk/theme/HighContrast/_common.scss | 95 ++++++++------- gtk/theme/HighContrast/gtk.css | 177 ++++++++++++++++------------ 2 files changed, 149 insertions(+), 123 deletions(-) diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index 833563e1cd..59cf608731 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -1477,6 +1477,7 @@ notebook { * Scrollbars * **************/ +scrollbar, .scrollbar { background-clip: padding-box; background-image: none; @@ -1491,14 +1492,14 @@ notebook { -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; + @extend .scrollbars-junction; $_slider_margin: 3px; $_slider_fine_tune_margin: 4px; - - .button { + + button { border: none; } - &.trough { @extend .scrollbars-junction; } - &.slider { + & slider { border-radius: 20px; border: 5px solid transparent; //margin background-color: mix($bg_color, $fg_color, 50%); @@ -1521,28 +1522,25 @@ notebook { &.overlay-indicator { &:not(.dragging):not(.hovering) { // Overlay scrolling indicator opacity: 0.4; + border-style: none; + background-color: transparent; -GtkRange-slider-width: 5px; - .slider { + slider { margin: 0; background-color: $fg_color; border: 1px solid white; background-clip: padding-box; } - .trough { - border-style: none; - background-color: transparent; - } - // w/o the following margin tweaks the slider shrinks when hovering/dragging - &.vertical .slider { + &.vertical slider { margin-top: $_slider_margin - 1px; margin-bottom: $_slider_margin - 1px; } - &.horizontal .slider { + &.horizontal slider { margin-left: $_slider_margin - 1px; margin-right: $_slider_margin - 1px; } @@ -1678,6 +1676,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { /************ * GtkScale * ************/ +scale, .scale, .scale.scale-has-marks-above.scale-has-marks-below, .scale.vertical.scale-has-marks-above.scale-has-marks-below { @@ -1686,6 +1685,13 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { -GtkRange-trough-border: 2; outline-offset: -9px; outline-radius: 4px; + margin: 10px; + border-width: 1px; + border-style: solid; + border-radius: 3px; + border-color: $borders_color; + background-color: mix($bg_color,$borders_color,60%); + box-shadow: inset 1px 1px transparentize(black, 0.9); &.fine-tune { outline-offset: -7px; @@ -1695,7 +1701,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { margin: 8px; } } - &.slider { + & slider { //FIXME: better gradient on the slider and hover state @include button(normal, $edge: none); border-radius: 50%; @@ -1723,56 +1729,47 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { border: 1px solid darken($selected_borders_color,3%); } } - &.trough { - margin: 10px; - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: $borders_color; - background-color: mix($bg_color,$borders_color,60%); - box-shadow: inset 1px 1px transparentize(black, 0.9); - &.highlight { - border-color: $selected_borders_color; - background-color: $selected_bg_color; - &:backdrop { - border-color: $insensitive_fg_color; - background-color: $insensitive_fg_color; - box-shadow: none; - } - } - &:insensitive, &.hilight:insensitive { - border-color: $insensitive_borders_color; - background-color: $insensitive_bg_color; - } + &.highlight { + border-color: $selected_borders_color; + background-color: $selected_bg_color; &:backdrop { - border-color: $backdrop_borders_color; - background-color: mix($backdrop_bg_color,$borders_color); - box-shadow: none; - } - &:backdrop:insensitive, .hilight:backdrop:insensitive { - border-color: $insensitive_fg_color; - background-color: $backdrop_bg_color; + border-color: $insensitive_fg_color; + background-color: $insensitive_fg_color; + box-shadow: none; } } + &:insensitive, &.hilight:insensitive { + border-color: $insensitive_borders_color; + background-color: $insensitive_bg_color; + } + &:backdrop { + border-color: $backdrop_borders_color; + background-color: mix($backdrop_bg_color,$borders_color); + box-shadow: none; + } + &:backdrop:insensitive, .hilight:backdrop:insensitive { + border-color: $insensitive_fg_color; + background-color: $backdrop_bg_color; + } } //FIXME: scale sliders %scale_marks_above_horz { - .trough { margin: 14px 10px 10px; } - &.fine-tune .trough { margin: 12px 8px 8px; } + margin: 14px 10px 10px; + &.fine-tune { margin: 12px 8px 8px; } } %scale_marks_below_horz { - .trough { margin: 10px 10px 14px; } - &.fine-tune .trough { margin: 8px 8px 12px; } + margin: 10px 10px 14px; + &.fine-tune { margin: 8px 8px 12px; } } %scale_marks_above_vert { - .trough { margin: 10px 10px 10px 14px; } - &.fine-tune .trough { margin: 8px 8px 8px 12px; } + margin: 10px 10px 10px 14px; + &.fine-tune { margin: 8px 8px 8px 12px; } } %scale_marks_below_vert { - .trough { margin: 10px 14px 10px 10px; } - &.fine-tune .trough { margin: 8px 12px 8px 8px; } + margin: 10px 14px 10px 10px; + &.fine-tune { margin: 8px 12px 8px 8px; } } /***************** diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css index 1a34079c28..cf6c30f1c7 100644 --- a/gtk/theme/HighContrast/gtk.css +++ b/gtk/theme/HighContrast/gtk.css @@ -1665,6 +1665,7 @@ notebook { /************** * Scrollbars * **************/ +scrollbar, .scrollbar { background-clip: padding-box; background-image: none; @@ -1676,46 +1677,61 @@ notebook { -GtkScrollbar-min-slider-length: 42; -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; } - .scrollbar .button { + scrollbar button, + .scrollbar button { border: none; } - .scrollbar.slider { + scrollbar slider, + .scrollbar slider { border-radius: 20px; border: 5px solid transparent; background-color: gray; } - .scrollbar.slider:backdrop, .scrollbar.slider:insensitive { + scrollbar slider:backdrop, scrollbar slider:insensitive, + .scrollbar slider:backdrop, + .scrollbar slider:insensitive { background-color: #e6e6e6; } - .scrollbar.slider:hover { + scrollbar slider:hover, + .scrollbar slider:hover { background-color: #4d4d4d; } - .scrollbar.slider:prelight:active { + scrollbar slider:prelight:active, + .scrollbar slider:prelight:active { background-color: #000; } - .scrollbar.slider.fine-tune { + scrollbar slider.fine-tune, + .scrollbar slider.fine-tune { border-width: 8px; } - .scrollbar.slider.fine-tune:prelight:active { + scrollbar slider.fine-tune:prelight:active, + .scrollbar slider.fine-tune:prelight:active { background-color: #000; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering), .scrollbar.overlay-indicator:not(.dragging):not(.hovering) { opacity: 0.4; + border-style: none; + background-color: transparent; -GtkRange-slider-width: 5px; } - .scrollbar.overlay-indicator:not(.dragging):not(.hovering) .slider { + scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider, + .scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; background-color: #000; border: 1px solid white; background-clip: padding-box; } - .scrollbar.overlay-indicator:not(.dragging):not(.hovering) .trough { - border-style: none; - background-color: transparent; } - .scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical .slider { + scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider, + .scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { margin-top: 2px; margin-bottom: 2px; } - .scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal .slider { + scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider, + .scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { margin-left: 2px; margin-right: 2px; } - .scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering { + scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering, + .scrollbar.overlay-indicator.dragging, + .scrollbar.overlay-indicator.hovering { opacity: 0.7; } -.scrollbars-junction, .scrollbar.trough { +.scrollbars-junction, scrollbar, +.scrollbar { border-color: transparent; background-color: #f2f2f2; } - .scrollbars-junction:backdrop, .scrollbar.trough:backdrop { + .scrollbars-junction:backdrop, scrollbar:backdrop, + .scrollbar:backdrop { background-color: transparent; } /********** @@ -1868,6 +1884,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { /************ * GtkScale * ************/ +scale, .scale, .scale.scale-has-marks-above.scale-has-marks-below, .scale.vertical.scale-has-marks-above.scale-has-marks-below { @@ -1875,20 +1892,30 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { -GtkRange-slider-width: 20; -GtkRange-trough-border: 2; outline-offset: -9px; - outline-radius: 4px; } + outline-radius: 4px; + margin: 10px; + border-width: 1px; + border-style: solid; + border-radius: 3px; + border-color: gray; + background-color: #cccccc; + box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); } + scale.fine-tune, .scale.fine-tune, .scale.scale-has-marks-above.scale-has-marks-below.fine-tune, .scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune { outline-offset: -7px; outline-radius: 6px; } + scale.fine-tune.trough, .scale.fine-tune.trough, .scale.scale-has-marks-above.scale-has-marks-below.fine-tune.trough, .scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune.trough { border-radius: 4px; margin: 8px; } - .scale.slider, - .scale.scale-has-marks-above.scale-has-marks-below.slider, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider { + scale slider, + .scale slider, + .scale.scale-has-marks-above.scale-has-marks-below slider, + .scale.vertical.scale-has-marks-above.scale-has-marks-below slider { border-width: 2px; border-style: solid; color: #000; @@ -1897,9 +1924,10 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { border-color: gray; border-radius: 50%; border-color: #787878; } - .scale.slider:hover, - .scale.scale-has-marks-above.scale-has-marks-below.slider:hover, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover { + scale slider:hover, + .scale slider:hover, + .scale.scale-has-marks-above.scale-has-marks-below slider:hover, + .scale.vertical.scale-has-marks-above.scale-has-marks-below slider:hover { border-width: 2px; border-style: solid; color: #000; @@ -1908,75 +1936,76 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { background-image: none; border-color: #787878; border-radius: 50%; } - .scale.slider:insensitive, - .scale.scale-has-marks-above.scale-has-marks-below.slider:insensitive, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:insensitive { + scale slider:insensitive, + .scale slider:insensitive, + .scale.scale-has-marks-above.scale-has-marks-below slider:insensitive, + .scale.vertical.scale-has-marks-above.scale-has-marks-below slider:insensitive { border-style: solid; border-radius: 50%; background-image: none; box-shadow: none; } - .scale.slider:backdrop, - .scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop { + scale slider:backdrop, + .scale slider:backdrop, + .scale.scale-has-marks-above.scale-has-marks-below slider:backdrop, + .scale.vertical.scale-has-marks-above.scale-has-marks-below slider:backdrop { border-style: solid; border-radius: 50%; border-color: #858585; background-image: none; box-shadow: none; } - .scale.slider:backdrop:insensitive, - .scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop:insensitive, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop:insensitive { + scale slider:backdrop:insensitive, + .scale slider:backdrop:insensitive, + .scale.scale-has-marks-above.scale-has-marks-below slider:backdrop:insensitive, + .scale.vertical.scale-has-marks-above.scale-has-marks-below slider:backdrop:insensitive { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: #8d8d8d; background-image: none; } - .scale.slider:active, - .scale.scale-has-marks-above.scale-has-marks-below.slider:active, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active { + scale slider:active, + .scale slider:active, + .scale.scale-has-marks-above.scale-has-marks-below slider:active, + .scale.vertical.scale-has-marks-above.scale-has-marks-below slider:active { border: 1px solid black; } - .scale.trough, - .scale.scale-has-marks-above.scale-has-marks-below.trough, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough { - margin: 10px; - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: gray; - background-color: #cccccc; - box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); } - .scale.trough.highlight, - .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight { - border-color: #000; - background-color: #000; } - .scale.trough.highlight:backdrop, - .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop { - border-color: gray; - background-color: gray; - box-shadow: none; } - .scale.trough:insensitive, .scale.trough.hilight:insensitive, - .scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive, - .scale.scale-has-marks-above.scale-has-marks-below.trough.hilight:insensitive, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.hilight:insensitive { + scale.highlight, + .scale.highlight, + .scale.scale-has-marks-above.scale-has-marks-below.highlight, + .scale.vertical.scale-has-marks-above.scale-has-marks-below.highlight { + border-color: #000; + background-color: #000; } + scale.highlight:backdrop, + .scale.highlight:backdrop, + .scale.scale-has-marks-above.scale-has-marks-below.highlight:backdrop, + .scale.vertical.scale-has-marks-above.scale-has-marks-below.highlight:backdrop { border-color: gray; - background-color: white; } - .scale.trough:backdrop, - .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop { - border-color: #8d8d8d; - background-color: silver; + background-color: gray; box-shadow: none; } - .scale.trough:backdrop:insensitive, .scale.trough .hilight:backdrop:insensitive, - .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, - .scale.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive { - border-color: gray; - background-color: #fff; } + scale:insensitive, scale.hilight:insensitive, + .scale:insensitive, + .scale.hilight:insensitive, + .scale.scale-has-marks-above.scale-has-marks-below:insensitive, + .scale.scale-has-marks-above.scale-has-marks-below.hilight:insensitive, + .scale.vertical.scale-has-marks-above.scale-has-marks-below:insensitive, + .scale.vertical.scale-has-marks-above.scale-has-marks-below.hilight:insensitive { + border-color: gray; + background-color: white; } + scale:backdrop, + .scale:backdrop, + .scale.scale-has-marks-above.scale-has-marks-below:backdrop, + .scale.vertical.scale-has-marks-above.scale-has-marks-below:backdrop { + border-color: #8d8d8d; + background-color: silver; + box-shadow: none; } + scale:backdrop:insensitive, scale .hilight:backdrop:insensitive, + .scale:backdrop:insensitive, + .scale .hilight:backdrop:insensitive, + .scale.scale-has-marks-above.scale-has-marks-below:backdrop:insensitive, + .scale.scale-has-marks-above.scale-has-marks-below .hilight:backdrop:insensitive, + .scale.vertical.scale-has-marks-above.scale-has-marks-below:backdrop:insensitive, + .scale.vertical.scale-has-marks-above.scale-has-marks-below .hilight:backdrop:insensitive { + border-color: gray; + background-color: #fff; } /***************** * Progress bars * -- 2.30.2